<template>
	<div>
		<el-row :gutter="24" style="margin-top: 20px">
			<el-col :span="16">
				<el-carousel height="480px" :interval="2000" arrow="always" style="border-radius: 10px;">
					<el-carousel-item v-for="item in imgs" :key="item">
						<el-image style="width: 100%;height: 100%;" :src="item" :fit="fit"></el-image>
					</el-carousel-item>
				</el-carousel>
			</el-col>
			<el-col :span="8">
				<el-card style="width: 80%;">
					<h2 style="margin: 20px 0">系统公告</h2>
					<div>
						<el-timeline reverse slot="reference">
							<el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time">
								<el-popover placement="right" width="200" trigger="hover" :content="item.content">
									<span slot="reference">{{ item.name }}</span>
								</el-popover>
							</el-timeline-item>
						</el-timeline>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="0" style="width: 95%;margin-top: 10px;">
			<div style="display: flex;align-items: center;">
				<div>楼层</div>
				<div style="margin-left: 10px;width: 100px;">
					<el-select v-model="floor" placeholder="请选择">
						<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div style="margin-left: 10px;">状态</div>
				<div style="margin-left: 10px;">
					<el-select v-model="state" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div style="margin-left: 10px;">
					<el-button @click="load" icon="el-icon-search" circle></el-button>
				</div>
				<div style="margin-left: 10px;">
					<el-button type="warning" @click="reload">重置</el-button>
				</div>
			</div>
		</el-row>

		<el-row :gutter="24" style="width: 95%;margin-top: 10px;">
			<el-col :span="4" v-for="item in tableData" :key="item.id" style="margin-top: 8px;">
				<div class="box-card">
					<div style="text-align: center;margin-top: 2px;">
						<span>座位号：{{item.seatNum}}</span><br />
						<span v-if="item.state=='空闲中'" style="color: cornflowerblue;cursor: pointer;"
							@click="order(item.seatNum)">预约({{item.floor}}楼)</span>
						<span v-else style="color: gray;">预约({{item.floor}}楼)</span>
					</div>
					<div style="height: 1px; background-color: #ebebeb; margin: 10px 0;"></div>
					<div style="display: flex; align-items: center; justify-content: center;">
						<el-tag v-if="item.state=='空闲中'" type="success">{{item.state}}
						</el-tag>
						<el-tag v-if="item.state=='使用中'" type="warning">{{item.state}}
						</el-tag>
					</div>
				</div>
			</el-col>
		</el-row>
		<div style="padding: 10px 0">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
				:page-sizes="[6, 12, 18, 24]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>

		<el-dialog title="完善个人信息" :visible.sync="centerDialogVisible" width="35%" center>
			<el-form label-width="80px" size="small">

				<el-form-item label="用户名">
					<el-input v-model="userInfo.username" disabled autocomplete="off" style="width: 85%;"></el-input>
				</el-form-item>
				<el-form-item label="昵称">
					<el-input v-model="userInfo.nickname" autocomplete="off" style="width: 85%;"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="userInfo.email" autocomplete="off" style="width: 85%;"></el-input>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="userInfo.phone" autocomplete="off" style="width: 85%;"></el-input>
				</el-form-item>
				<!-- <el-form-item>
					<el-button type="primary" @click="save">确 定</el-button>
				</el-form-item> -->
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false" size="medium">取 消</el-button>
				<el-button type="primary" @click="save" size="medium" style="margin-left: 30px;">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: "FrontHome",
		data() {
			return {
				userInfo: {},
				centerDialogVisible: false,
				notices: [],
				tableData: [],
				user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
				total: 0,
				pageNum: 1,
				pageSize: 12,
				floor: null,
				imgs: [
					require('@/assets/banner1.jpg'),
					require('@/assets/banner2.jpg'),
					require('@/assets/banner3.png')
				],
				options: [{
					value: '使用中',
					label: '使用中'
				}, {
					value: '空闲中',
					label: '空闲中'
				}],
				state: "",
				options2: [{
					value: '1',
					label: '1楼'
				}, {
					value: '2',
					label: '2楼'
				}, {
					value: '3',
					label: '3楼'
				}, {
					value: '4',
					label: '4楼'
				}, {
					value: '5',
					label: '5楼'
				}],
			}
		},
		created() {
			this.load()
			this.updateCount()
			this.getUser().then(res => {
				this.userInfo = res
				if (!this.userInfo.phone || !this.userInfo.email) {
					this.centerDialogVisible = true
				}
			})
		},
		methods: {
			save() {
				this.request.post("/user", this.userInfo).then(res => {
					if (res.code === '200') {
						this.$message.success("保存成功")
						// 触发父级更新User的方法
						this.$emit("refreshUser")
						// 更新浏览器存储的用户信息
						this.getUser().then(res => {
							res.token = JSON.parse(localStorage.getItem("user")).token
							localStorage.setItem("user", JSON.stringify(res))
						})
						this.centerDialogVisible=false
					} else {
						this.$message.error("保存失败")
					}
				})
			},
			async getUser() {
				return (await this.request.get("/user/username/" + this.user.username)).data
			},
			reload() {
				this.floor = null;
				this.state = "";
				this.load()
			},

			updateCount() {
				this.request.get("/count/update").then(res => {

				})
			},

			load() {
				this.request.get("/notice").then(res => {
					this.notices = res?.data
				})
				this.request.get("/seat/page", {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						floor: this.floor,
						state: this.state
					}
				}).then(res => {
					this.tableData = res.data.records
					this.total = res.data.total
				})
			},

			order(seatNum) {
				this.$confirm('确定要预约该座位吗？', '提示', {
					type: 'info'
				}).then(() => {
					const url = "/seat/order/" + seatNum;
					this.request.post(url)
						.then(res => {
							if (res.code === '200') {
								this.load();
								this.$message.success('预约成功');
							} else {
								this.$message.warning(res.msg || '预约失败');
							}
						})
				}).catch(() => {
					this.$message.info('已取消预约');
				});
			},
			cancel(id) {
				this.request.get("/seat/cancel/" + id).then(res => {
					if (res.code === '200') {
						this.load()
						this.$message.success("取消预约成功")
					} else {
						this.$message.warning(res.msg)
					}
				})
			},
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.load()
			},
			handleCurrentChange(pageNum) {
				this.pageNum = pageNum
				this.load()
			},
			del(id) {
				this.request.delete("/seat/" + id).then(res => {
					if (res.code === '200') {
						this.$message.success("删除成功")
						this.load()
					} else {
						this.$message.error("删除失败")
					}
				})
			},
		}
	}
</script>

<style scoped>
	.box-card {
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		overflow: hidden;
		color: #303133;
		transition: .3s;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		height: 100px;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>